<template>
    <!--更换头像窗口-->
    <div class="windowBoxBig" style="height: 650px; width: 1200px;">
        <!-- 左侧部分 -->
        <div class="left">
            <div>
                <el-avatar :src="currUser.img" :size="100" style="margin-top: 80%; border: 5px solid rgba(255, 172, 64, 0.8);"></el-avatar>
                <br><br>
                <span class="userName">{{currUser.gameId}}</span>
            </div>
        </div>
        <!-- 右侧部分 -->
        <div class="right">
            <br>
            <a class="title">
                <span class="x" @click.stop="closeChangeTouXiangWin">×</span>
                <br>
                <span style="margin-left: 20px"><b>自定义身份标识</b></span>
            </a>
            <br>
            <ul>
                <li v-for="t in touXiang" :key="t.index">
                    <div class="touXiangBox" :data-url="t.url" @click="changeTouXiang(t.url)" style="height: 90px">
                        <el-avatar :src="t.url" :size="90" shape="square"></el-avatar>
                    </div>
                </li>
            </ul>
        </div>

        
    </div>
</template>

<script>
export default {
    name: 'TouXiangChangeWin',
    data(){
        return{
            //头像
            touXiang:[
                {index: 0, url: "https://opgg-static.akamaized.net/images/profile_icons/profileIcon5331.jpg"},
                {index: 1, url: "https://game.gtimg.cn/images/lol/act/img/profileicon/1377.png"},
                {index: 2, url: "https://game.gtimg.cn/images/lol/act/a20210625icon/avatar19.png"},
                {index: 3, url: "https://game.gtimg.cn/images/lol/act/img/profileicon/6.png"},
                {index: 4, url: "https://opgg-static.akamaized.net/images/profile_icons/profileIcon5294.jpg"},
                {index: 5, url: "https://opgg-static.akamaized.net/images/profile_icons/profileIcon502.jpg"},
                {index: 6, url: "https://game.gtimg.cn/images/lol/act/img/profileicon/29.png"},
                {index: 7, url: "https://opgg-static.akamaized.net/images/profile_icons/profileIcon5330.jpg"},
                {index: 8, url: "https://opgg-static.akamaized.net/images/profile_icons/profileIcon5334.jpg"},
                {index: 9, url: "https://opgg-static.akamaized.net/images/profile_icons/profileIcon5332.jpg"},
                {index: 10, url: "https://opgg-static.akamaized.net/images/profile_icons/profileIcon5333.jpg"},
                {index: 11, url: "https://opgg-static.akamaized.net/images/profile_icons/profileIcon5335.jpg"},
                {index: 12, url: "https://opgg-static.akamaized.net/images/profile_icons/profileIcon5336.jpg"},
                {index: 13, url: "https://opgg-static.akamaized.net/images/profile_icons/profileIcon5337.jpg"},
                {index: 14, url: "https://opgg-static.akamaized.net/images/profile_icons/profileIcon5322.jpg"},
                {index: 15, url: "https://opgg-static.akamaized.net/images/profile_icons/profileIcon5320.jpg"},
                {index: 16, url: "https://opgg-static.akamaized.net/images/profile_icons/profileIcon5321.jpg"},
                {index: 17, url: "https://game.gtimg.cn/images/lol/act/a20210625icon/avatar18.png"},
                {index: 18, url: "https://game.gtimg.cn/images/lol/act/a20210625icon/avatar17.png"},
                {index: 19, url: "https://game.gtimg.cn/images/lol/act/img/profileicon/1375.png"},
                {index: 20, url: "https://game.gtimg.cn/images/lol/act/img/profileicon/1376.png"},
                {index: 21, url: "https://game.gtimg.cn/images/lol/act/img/profileicon/1374.png"},
                {index: 22, url: "https://game.gtimg.cn/images/lol/act/img/profileicon/5.png"},
                {index: 23, url: "https://game.gtimg.cn/images/lol/act/img/profileicon/4.png"},
                {index: 24, url: "https://game.gtimg.cn/images/lol/act/img/profileicon/3.png"},
                {index: 25, url: "https://game.gtimg.cn/images/lol/act/img/profileicon/2.png"},
                {index: 26, url: "https://game.gtimg.cn/images/lol/act/img/profileicon/1.png"},
            ],
        }
    },
    props:['closeChangeTouXiangWin', 'currUser'],
    methods:{
        changeTouXiang(url){
            //触发全局事件总线$bus上的onChangeTouXiang事件
            this.$bus.$emit('onChangeTouXiang', url)
        }
    },
}
</script>

<style scoped>
    .title{
        font-size: 25px; 
        color: rgb(197, 189, 152);
        margin-right: 25px;
        margin-left: 25px;
    }

    .left{
        height: 100%;
        width: 28%;
        float: left;
    }
    
    .right{
        height: 100%;
        width: 72%;
        float: left;
    }

    /* 右上角关闭按钮 */
    .x{
        font-size: 28px; 
        color: rgb(141, 141, 141);
        float: right;
        margin-top: -10px;
        margin-right: 25px;
    }

    .x:hover{
        color: rgb(197, 197, 197);
    }

    ul{
        margin-left: -35px;
    }

    ul li{
        float: left;
        margin: 10px;
        list-style: none;
        display: flex;
    }

    .touXiangBox{
        border: 1px solid rgb(56, 53, 42);
    }

    .touXiangBox:hover{
        border-image: linear-gradient(0deg, rgb(255, 172, 64), rgb(254, 255, 223)) 20 20;
    }

    .left div{
        margin-left: auto;
        margin-right: auto;

        border: 5px solid red;
        border-top: 0;
        border-bottom: 0;
        height: 100%;
        width: 75%;

        text-align: center;

        border-image: linear-gradient(0deg, rgba(131, 180, 130, 0), rgba(91, 114, 106, 0.5), rgba(131, 180, 130, 0)) 20 20;
        /* background-image: linear-gradient(0deg, rgba(131, 180, 130, 0), rgba(91, 114, 106, 0.2), rgba(131, 180, 130, 0)); */
        background-image: radial-gradient(circle, rgba(91, 114, 106, 0.3), rgba(131, 180, 130, 0));
    }

    .userName{
        text-align: center;
        color: rgb(212, 208, 188);
        font-size: 20px;
    }
</style>